<template>
    <view class="container paddingBottomBar" :style="themeColor">
        <hx-navbar ref="hxnb" :config="config" id="nav">
            <block slot="center">
                <view class="tab">
                    <view class="tab-item" :class="{ current: currentTab == 0 }" @click="goTop">
                        <text>商品</text>
                        <view class="border"></view>
                    </view>
                    <view class="tab-item" :class="{ current: currentTab == 1 }" @click="goDetail">
                        <text>详情</text>
                        <view class="border"></view>
                    </view>
                </view>
            </block>
        </hx-navbar>
        <view class="banner">
            <view class="video" v-if="isBannerHasVideo && bannerType == 1">
                <video class="video-player" id="myVideo" :src="easyGetImgUrl(productInfo.VideoUrl)"
                    @error="videoErrorCallback" controls :poster="imgUrls[0]"></video>
            </view>
            <swiper v-show="bannerType == 0" class="swiper" @change="swiper">
                <swiper-item v-for="(item, index) in imgUrls" :key="index">
                    <image class="image" :src="item" mode="aspectFill" @tap="previewImage(index)"></image>
                </swiper-item>
            </swiper>
            <text class="page-num" v-if="bannerType == 0">{{ currentSwiper + 1 }}/{{ imgUrls.length }}</text>
            <view class="banner-type" v-if="isBannerHasVideo">
                <text class="type-text" :class="{ active: bannerType == 1 }" @click="changeType(1)">视频</text>
                <text class="type-text" :class="{ active: bannerType == 0 }" @click="changeType(0)">图片</text>
            </view>
        </view>
        <view class="info-item price-item" v-show="productInfo.ProductName">
            <view class="price">
                <view class="price-box">
                    <text class="price-text small">¥</text>
                    <text class="price-text" v-if="currentDate.CurrentMinPrice < currentDate.CurrentMaxPrice">{{
                        currentDate.CurrentMinPrice }}~</text>
                    <text class="price-text">{{ currentDate.CurrentMaxPrice }}</text>
                    <text class="price-text" v-if="currentDate.CurrentUnit && false">{{
                        currentDate.CurrentUnit.split("=")[0]
                        }}</text>
                </view>

                <view v-if="productInfo.MarkePrice" class="original-price-text"><text>原价</text><text
                        class="del-text">¥{{ productInfo.MarkePrice }}</text></view>
            </view>
            <!-- #ifdef MP -->
            <button class="btn-share" open-type="share">
                <iconsfont customIcons="icon-zhuanfa" color="#999"></iconsfont>
                <text>分享</text>
            </button>
            <!-- #endif -->
        </view>
        <view class="info-item desc-item">
            <view class="product-name">
                <text class="product-name-text">{{ productInfo.ProductName }}</text>
                <text class="product-desc-text" v-if="productInfo.ShortDescription">{{
                    productInfo.ShortDescription
                    }}</text>
            </view>
        </view>

        <view class="info-item show-num-item" v-if="productInfo && JSON.stringify(productInfo) != '{}'">
            <text>起购：{{ productInfo.MinNum }}{{ productInfo.Unit }}</text>
            <text v-if="productInfo.orderLimitNum">限购：{{ productInfo.orderLimitNum }}{{ productInfo.Unit }}</text>
            <text v-if="getAppSet().isProDetailShowStock">库存：{{ productInfo.V_StockSum }}{{ productInfo.Unit }}</text>
            <!-- <text v-if="!getAppSet().isProDetailShowStock">{{productInfo.V_StockSum>0?'有货':'无货'}}</text> -->
            <text v-if="productInfo.ShowSaleCounts">销量：{{ productInfo.SaleCounts }}{{ productInfo.Unit }}</text>
        </view>
        <view class="info-item no-worry-item" v-if="productInfo && productInfo.QAList && productInfo.QAList.length > 0">
            <image class="img-no-worry" src="@/static/img/img_noworry.png"></image>
            <view class="no-worry-box">
                <text class="no-worry-text" :class="{ 'last-no-worry-text': qaIndex == productInfo.QAList.length - 1 }"
                    v-for="(qaItem, qaIndex) in productInfo.QAList">{{ qaItem.Description }}</text>
            </view>
        </view>
        <view class="info-item feature-item" v-if="productInfo.TagsList && productInfo.TagsList.length > 0">
            <product-feature v-for="(item, index) in productInfo.TagsList" :key="index" :text="item.Name">
            </product-feature>
        </view>
        <view class="info-item" v-if="data.PolicyList && data.PolicyList.length > 0" @click="$refs.policyPop.open()">
            <view class="label">
                <text class="label-text">促销</text>
                <text class="value-text main-color-text icon-gray-2"><text class="cxType">{{
                    data.PolicyList[0].DetailList[0].DiscountDetailList[0].Type == 0 ? "满减" : "折扣"
                        }}</text>{{ data.PolicyList[0].Name }};</text>
            </view>
            <uni-icons type="arrowright" customIcons="icon-gray-4"></uni-icons>
        </view>
        <view class="info-item" v-if="productInfo.ProductAttributesList && productInfo.ProductAttributesList.length > 0"
            @click="showSku()">
            <view class="label">
                <text class="label-text">规格</text>
                <!-- 				<text class="value-text" v-for="(item,index) in productInfo.ProductAttributesList" :key="index">
					{{item.AttributeName}};</text> -->
                <text class="value-text">{{ productInfo.ProductSkuList.length }}种规格可选</text>
            </view>
            <uni-icons type="arrowright" customIcons="icon-gray-4"></uni-icons>
        </view>
        <view class="comment" v-if="comment">
            <view class="info-item" @click="goCommentFn">
                <view class="label">
                    <text class="label-text text-bold">评价({{ commentTotalNum }})</text>
                </view>
                <text v-if="comment.length >= 1">查看更多</text>
                <uni-icons type="arrowright" v-if="comment.length >= 1" customIcons="icon-gray-4"></uni-icons>
            </view>
            <comment-list-item :showReply="false" v-for="(item, index) in [comment[0]]" :key="index"
                v-if="comment.length > 0" :item="item"></comment-list-item>
        </view>
        <item-title-border class="product-content" text="商品详情"></item-title-border>
        <view class="info-item">
            <rich-text @tap="showImg"
                :nodes="formatRichTextFn(productInfo.Description ? productInfo.Description : description)">
            </rich-text>
        </view>

        <buy-bottom-bar :IsFavorite="data.IsFavorite" @favoriteFn="favoriteFn" @showSku="showSku"></buy-bottom-bar>
        <uni-popup ref="policyPop" type="bottom" background-color="#fff" :safe-area="false">
            <view class="pop-main">
                <view class="title">
                    <text class="title-text">促销</text>
                    <uni-icons class="icon-close" size="48" type="closeempty" @click="$refs.policyPop.close()">
                    </uni-icons>
                </view>
                <view class="main">
                    <view class="policy-item" v-for="(item, index) in data.PolicyList" :key="index">
                        <text class="policy-name main-color-text icon-gray-2"><text class="cxType">{{
                            item.DetailList[0].DiscountDetailList[0].Type == 0 ? "满减" : "折扣"
                                }}</text>{{ item.Name }} {{ item.Remark }}</text>
                    </view>
                </view>
            </view>
        </uni-popup>
        <uni-popup type="bottom" ref="popSku" @change="skuChange">
            <product-spec :data="optPopup.data" :fresh="optPopup.change" :popup-type="optPopup.type"
                @closePopup="closePopup" @addCart="addCart" @addBatch="addBatch" @setCarListFunc="setCarListFunc"
                @changeUnit="changeUnit">
            </product-spec>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations, mapState } from "vuex"
import productFeature from "@/pages_supplier/components/common/product-feature.vue"
import buyBottomBar from "@/pages_supplier/components/product/buy-bottom-bar.vue"
import itemTitleBorder from "@/pages_supplier/components/common/item-title-border.vue"
import productSpec from "@/pages_supplier/components/product/product-spec.vue"
import { formatRichText, getElementTop } from "@/uni-sub-base/utils/elementUtil.js"
import { favoriteFn } from "@/utils/productUtil.js"

import { getInintProductDetailInfo, getCommentListByProduct } from "@/service/api/product.js"

import utilsOld from "@/utils/utilsOld.js"
import commentListItem from "@/uni-sub-base/components/comment/list-item.vue"
export default {
    components: {
        productFeature,
        buyBottomBar,
        itemTitleBorder,
        productSpec,
        commentListItem,
    },
    data() {
        return {
            isBannerHasVideo: false,
            bannerType: 0,
            currentSwiper: 0,
            currentTab: 0,
            detailTop: 0,
            config: {
                height: 44,
                barPlaceholder: false,
                color: ["#ffffff", "#333333"],

                //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
                backgroundColor: [0, "#ffffff"],
                slideBackgroundColor: [1, "#ffffff"],
                // 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 Scroll 事件
                statusBarFontColor: ["#ffffff", "#000000"],
                centerSlot: true,
                // centerSlotSwitch: true,
            },
            tabOpacity: 0,
            tabTop: 44,
            imgUrls: [],
            isHeart: false,
            description: '<span style="font-size:12px">暂无详情</span>',
            share: {
                title: "",
                path: "/pages_shop/packet/product/productDetail",
                imageUrl: "",
                desc: "",
                content: "",
            },
            systemInfo: {},
            videoContext: {},
            data: {},
            productInfo: {},
            currentDate: {
                CurrentMaxPrice: 0,
                CurrentMinPrice: 0,
                CurrentUnit: "",
            },
            param: {
                InfoType: 0,
                productId: 0,
            },
            comment: [],
            // sku 商品规格弹窗
            optPopup: {
                data: {},
                type: "",
                change: false,
                show: true,
            },
            commentTotalNum: 0,
            descriptionImg: [],
        }
    },
    onLoad(e) {
        this.param = {
            InfoType: e.InfoType,
            productId: e.id,
        }
    },
    mounted() {
        this.getInit()
        this.getData()
        this.getCommentListByProduct()
    },
    methods: {
        ...mapMutations(["UP_VIEW"]),
        //获取评论
        getCommentListByProduct() {
            let param = {
                page: 1,
                product_id: this.param.productId,
                size: 3,
            }
            getCommentListByProduct(param).then((res) => {
                if (res.Data && res.Data.Data.length > 0) {
                    this.comment = res.Data.Data
                    this.commentTotalNum = res.Data.RecordAmout
                }
            })
        },
        //获取商品详情
        getData() {
            uni.showLoading({
                title: "加载中",
            })
            getInintProductDetailInfo(this.param).then((res) => {
                this.data = res.Data
                this.productInfo = this.data.ProductInfo

                //是否有视频
                this.isBannerHasVideo = this.productInfo.VideoUrl && this.productInfo.VideoUrl != ""
                this.bannerType = this.isBannerHasVideo ? 1 : 0
                this.videoContext = uni.createVideoContext("myVideo")

                //取出详情图片
                this.getDescriptionImg(this.productInfo.Description)

                // 设置显示的动态值
                this.productInfo.CurrentMaxPrice =
                    this.productInfo.SaleMaxPrice % 1 === 0
                        ? this.productInfo.SaleMaxPrice
                        : Number(this.productInfo.SaleMaxPrice.toFixed(2)) // 显示最高价格
                this.productInfo.CurrentMinPrice =
                    this.productInfo.SaleMinPrice % 1 === 0
                        ? this.productInfo.SaleMinPrice
                        : Number(this.productInfo.SaleMinPrice.toFixed(2)) // 显示最低价格
                this.productInfo.CurrentUnit = this.productInfo.ProductUnitList[0].UnitName // 显示当前单位
                this.productInfo.CurrentUnitId = this.productInfo.ProductUnitList[0].UnitId // 显示当前单位
                this.currentDate.CurrentMaxPrice = this.productInfo.CurrentMaxPrice
                this.currentDate.CurrentMinPrice = this.productInfo.CurrentMinPrice
                this.currentDate.CurrentUnit = this.productInfo.CurrentUnit
                this.productInfo.CurrentStock = this.productInfo.V_StockSum // 显示当前库存
                this.productInfo.UnitActiveIndex = 0 // 单规格商品默认显示第一个加减框

                this.imgUrls = []
                let imgs = this.productInfo.ImageUrl.split(",")
                imgs.forEach((e) => {
                    this.imgUrls.push(this.easyGetImgUrl(e))
                })
                //设置分享信息
                this.share = {
                    title: this.productInfo.ProductName,
                    path:
                        "/pages_shop/packet/product/productDetail" +
                        "?id=" +
                        this.param.productId +
                        "&InfoType=" +
                        this.param.InfoType,
                    imageUrl: this.imgUrls[0],
                    desc: "",
                    content: "",
                }
                this.changeArr()
                uni.hideLoading()
            })
        },
        formatRichTextFn(text) {
            return formatRichText(text)
        },
        //收藏商品
        favoriteFn() {
            let isCancel = this.data.IsFavorite == 1
            let param = {
                isCancel: isCancel,
                productId: this.param.productId,
            }
            favoriteFn(param).then((res) => {
                this.data.IsFavorite = isCancel ? 0 : 1
                this.easyToast(isCancel ? "取消收藏" : "收藏成功")
                //通知外面更新
                this.UP_VIEW(new Date().getTime())
            })
        },
        goDetail() {
            //到达商品详情锚点

            uni.createSelectorQuery()
                .in(this)
                .select(".product-content")
                .boundingClientRect((data) => {
                    //目标位置的节点：类或者id
                    uni.createSelectorQuery()
                        .in(this)
                        .select(".container")
                        .boundingClientRect((res) => {
                            //最外层盒子的节点：类或者id
                            uni.pageScrollTo({
                                duration: 200, //过渡时间
                                scrollTop: data.top - res.top - this.systemInfo.statusBarHeight - 44, //44为head的高度
                            })
                        })
                        .exec()
                })
                .exec()
        },
        goTop() {
            //到达顶部
            uni.pageScrollTo({
                duration: 200, //过渡时间
                scrollTop: 0, //到达距离顶部的top值
            })
        },
        getInit() {
            //获取系统信息
            this.systemInfo = uni.getSystemInfoSync()
            //获取详情所在高度
            getElementTop(
                this,
                ".product-content",
                (e) => {
                    this.detailTop = Number(e.split("px")[0]) - this.systemInfo.statusBarHeight - 44 - 1
                },
                true,
            )
        },
        swiper(e) {
            this.currentSwiper = e.detail.current
        },
        changeType(type) {
            //切换banner 类型 0图片 1视频
            this.bannerType = type
            if (type == 0) {
                this.videoContext.pause()
            }
        },
        videoErrorCallback(e) { },
        showSku(e) {
            this.showPopSku = true
            this.optPopup.type = "attr"
            this.optPopup.data = this.productInfo
            this.$refs.popSku.open()
        },
        skuChange(e) { },
        closePopup() {
            this.$refs.popSku.close()
        },
        // 整理数据
        changeArr() {
            const _this = this
            let item = this.productInfo
            item.ProductUnitList = this.data.ProductUnitExList
            // 图片列表
            if (item.ImageUrl) {
                const ImgUrlList = utilsOld.strToArr(item.ImageUrl)
                item.logo = ImgUrlList[0]
            }
            if (item.ThumbnailUrl160) {
                item.logo = item.ThumbnailUrl160
            }

            // 设置显示的动态值
            item.CurrentMaxPrice =
                item.SaleMaxPrice % 1 === 0 ? item.SaleMaxPrice : Number(item.SaleMaxPrice.toFixed(2)) // 显示最高价格
            item.CurrentMinPrice =
                item.SaleMinPrice % 1 === 0 ? item.SaleMinPrice : Number(item.SaleMinPrice.toFixed(2)) // 显示最低价格
            item.CurrentUnit = item.ProductUnitList[0].UnitName // 显示当前单位
            item.CurrentUnitId = item.ProductUnitList[0].UnitId // 显示当前单位ID
            item.CurrentStock = item.V_StockSum // 显示当前库存
            item.UnitActiveIndex = 0 // 单规格商品默认显示第一个加减框

            // 单位栏添加
            if (item.ProductUnitList.length > 0) {
                item.ProductUnitList.forEach((ite) => {
                    ite.Title = ite.UnitName + (ite.Ratio !== 1 ? "=" + ite.Ratio + item.CurrentUnit : "")

                    this.initLoopArr(ite.ProductSkuAttrList)
                })
            }

            // ProductSkuList数据修改
            item.ProductSkuList.forEach((ite) => {
                if (ite.ProductUnitPriceList[0]) {
                    ite.CurrentPrice =
                        ite.ProductUnitPriceList[0].Price % 1 === 0
                            ? ite.ProductUnitPriceList[0].Price
                            : Number(ite.ProductUnitPriceList[0].Price.toFixed(2))
                    ite.CurrentUnit = ite.ProductUnitPriceList[0].UnitName // 显示当前单位
                    ite.CurrentUnitId = ite.ProductUnitPriceList[0].UnitId // 显示当前单位ID
                    ite.UnitActiveIndex = 0 // 单规格商品默认显示第一个加减框
                    ite.ProductUnitPriceList.forEach((it) => {
                        it.Amount = 0
                        it.Title = it.UnitName + (it.Ratio !== 1 ? "=" + it.Ratio + ite.CurrentUnit : "")
                    })
                }
            })
            this.productInfo = item
        },

        // 遍历规格，数量清零
        initLoopArr(arr) {
            if (arr && arr.length > 0) {
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].ProductAttrList && arr[i].ProductAttrList.length > 0) {
                        this.initLoopArr(arr[i].ProductAttrList)
                    } else {
                        if (arr[i].SkuModel && arr[i].SkuModel.ProductUnitPrice) {
                            arr[i].SkuModel.ProductUnitPrice.Amount = 0
                        }
                    }
                }
            }
        },
        addCart(e) {
            this.$refs.popSku.close()
        },
        addBatch(e) {
            this.$refs.popSku.close()
        },
        setCarListFunc(e) {
            // this.$refs.popSku.close()
        },
        changeUnit(item) {
            this.currentDate.CurrentMaxPrice = item.CurrentMaxPrice
            this.currentDate.CurrentMinPrice = item.CurrentMinPrice
            this.currentDate.CurrentUnit = item.CurrentUnit
        },
        goCommentFn() {
            if (this.comment.length < 1) {
                return
            }
            this.easyGoTo("/pages_shop/packet/comment/index?product_id=" + this.productInfo.ID)
        },
        previewImage(index) {
            let that = this
            var current = index
            uni.previewImage({
                current: current,
                urls: that.easyImgList(that.imgUrls.join(",")),
                // longPressActions:{
                // 	itemList:['保存到相册'],
                // 	success: (e) => {
                // 		uni.downloadFile({
                // 			url:that.easyGetImgUrl(that.imgUrls[e.index]),
                // 			success(res) {
                // 				uni.saveImageToPhotosAlbum({
                // 					filePath:res.tempFilePath,
                // 					success() {
                // 						this.easyToast("保存成功")
                // 					}
                // 				})
                // 			}
                // 		})
                // 	}
                // }
            })
        },
        getDescriptionImg(text) {
            if (text && text != "") {
                let imgs = text.match(/<img[^>]+>/g)
                let arrImg = []
                if (imgs) {
                    for (var j = 0; j < imgs.length; j++) {
                        imgs[j].replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
                            arrImg.push(capture)
                        })
                    }
                }

                this.descriptionImg = arrImg
            }
        },
        showImg(e) {
            uni.previewImage({
                urls: this.descriptionImg,
            })
        },
    },
    onPageScroll(e) {
        // 重点，用到滑动切换必须加上
        this.$refs.hxnb.pageScroll(e)
        const scrollTop = e.scrollTop
        if (scrollTop >= this.detailTop) {
            this.currentTab = 1
        } else {
            this.currentTab = 0
        }
    },
}
</script>

<style lang="scss">
.banner {
    position: relative;
    height: 750rpx;

    .video {
        width: 100%;
        height: 100%;

        .video-player {
            width: 100%;
            height: 100%;
        }
    }

    .swiper {
        height: 750rpx;

        .image {
            width: 100%;
            height: 100%;
        }
    }

    .page-num {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 40rpx;
        bottom: 40rpx;
        padding: 0 30rpx;
        height: 44rpx;
        border-radius: 40rpx;
        color: $color-white;
        background: rgba(0, 0, 0, 0.6);
    }

    .banner-type {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 50%;
        bottom: 40rpx;
        width: 160rpx;
        margin-left: -80rpx;
        height: 44rpx;
        border-radius: 40rpx;
        color: $color-white;
        background: rgba($color-white, 0.5);
        z-index: 9;

        .type-text {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            height: 44rpx;
            border-radius: 40rpx;
            font-size: $font-size-20;
        }

        .active {
            color: $color-white;
            background: rgba($color-black, 0.6);
        }
    }
}

.tab {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;

    .tab-item {
        display: flex;
        flex: 1;
        width: 120rpx;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        text {
            font-size: $font-size-32;
            height: 40px;
            justify-content: center;
            margin-bottom: -10rpx;
        }

        .border {
            width: 60rpx;
            height: 4rpx;
            border-radius: 4rpx;
        }
    }

    .current {
        text {
            color: $app-color-main;
        }

        .border {
            background: $app-color-main;
        }
    }
}

.info-item {
    padding: $app-page-padding;
    background: $color-white;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;

    .label {
        flex: 1;

        .label-text {
            margin-right: 40rpx;
            font-size: $font-size-28;
            color: $color-gray-1;
            font-weight: bold;
        }

        .value-text {
            font-size: $font-size-28;
        }
    }
}

.comment-item {
    flex-direction: column;
    align-items: flex-start;
}

.price-item {
    margin-bottom: 0;
    padding-bottom: 0;

    .price {
        flex: 1;

        .price-box {
            display: flex;
            align-items: flex-end;

            .small {
                font-size: $font-size-28;
                margin-bottom: 8rpx;
            }
        }

        .original-price-text {
            display: flex;
            align-items: center;

            text {
                font-size: $font-size-20;
                color: $app-color-text-tip;
            }
        }

        .price-text {
            font-size: $font-size-52;
            color: $color-orange-1;
        }
    }
}

.desc-item {
    margin-bottom: 0;
    align-items: flex-start;

    .product-name {
        display: flex;
        flex: 1;
        flex-direction: column;
        margin-right: 30rpx;
    }
}

.btn-share {
    background: $color-gray-5;
    padding: 0;
    width: 120rpx;
    height: 56rpx;
    border-top-right-radius: 0rpx;
    border-bottom-right-radius: 0rpx;
    border-top-left-radius: 30rpx;
    border-bottom-left-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin-right: -$app-item-padding;

    &::after {
        border: 0;
    }

    text {
        margin-top: 4rpx;
        margin-left: 10rpx;
    }
}

.product-name-text {
    font-weight: 700;
    margin-bottom: 20rpx;
    font-size: $font-size-30;
}

.product-desc-text {
    color: $app-color-text-tip;
}

.product-name-desc {
    color: $app-color-text-tip;
}

.product-content {
    display: flex;
    background: $color-white;
}

.show-num-item {
    border-top: solid 1rpx $line;

    text {
        margin-right: 20rpx;
        font-size: $font-size-22;
        color: $app-color-text-tip;

        &:last-child {
            display: flex;
            margin-right: 0;
            flex: 1;
            justify-content: flex-end;
        }
    }
}

.comment {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20rpx;

    .info-item {
        margin-bottom: 0;
    }
}

.pop-main {
    .main {
        font-size: 24rpx;
    }
}

.cxType {
    width: 56rpx;
    height: 36rpx;
    line-height: 36rpx;
    border-radius: 4rpx;
    border: 1rpx solid #c4181f;
    font-size: 20rpx;
    color: #c4181f;
    display: inline-block;
    text-align: center;
    margin-right: 12rpx;
}

.feature-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.no-worry-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-bottom: 10rpx;

    .img-no-worry {
        width: 90rpx;
        height: 24rpx;
        margin-right: 28rpx;
    }

    .no-worry-box {
        display: flex;
        flex-direction: row;
        margin-top: -6rpx;
        flex-direction: row;
        flex-wrap: wrap;

        .no-worry-text {
            position: relative;
            margin-right: 20rpx;
            padding-left: 10rpx;
            margin-bottom: 8rpx;

            &:after {
                content: " ";
                position: absolute;
                right: -16rpx;
                top: 14rpx;
                width: 6rpx;
                height: 6rpx;
                border-radius: 20rpx;
                background-color: $app-color-text-main;
            }
        }

        .last-no-worry-text {
            &:after {
                background-color: $transparent;
            }
        }
    }
}
</style>
